<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.6/echarts-gl.js"></script>
<body>
<div>点击下方按钮生成随机拟合结果图</div>
<div id = "main" style="width: 600px;height:400px;"></div>
<div id = "func"></div>
</body>
<script>
  const chartDom = document.getElementById('main');
  const myChart = echarts.init(chartDom);
  // const myChart = echarts.init(chartDom, null, {renderer: 'svg'});

  function drawLine(scatter, fit, func) {
    document.getElementById("func").innerHTML = ' 公式：' + func;
    draw(JSON.parse(scatter), JSON.parse(fit));
  }

  function draw3DLine() {
    draw3d();
  }

  function draw(scatter,fit) {
    var option = {
      xAxis: {
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      yAxis: {
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      series: [{
        name: 'scatter',
        type: 'scatter',
        data: scatter
      },{
        name: 'line',
        type: 'line',
        data: fit,
      }]
    };
    option && myChart.setOption(option);
  }

  function draw3d(){
    var data = [[1.0, 0.0, 22.027309818384033], [0.9950041652780258, 0.09983341664682815, 22.02336351701478], [0.9800665778412416, 0.19866933079506122, 21.999469171463815], [0.955336489125606, 0.2955202066613396, 21.95586532841127], [0.9210609940028851, 0.3894183423086505, 21.89298750239132], [0.8775825618903728, 0.479425538604203, 21.81146383862789], [0.8253356149096783, 0.5646424733950354, 21.712108846570978], [0.7648421872844885, 0.644217687237691, 21.595915265874805], [0.6967067093471655, 0.7173560908995227, 21.464044145708552], [0.6216099682706645, 0.7833269096274833, 21.317813236665195], [0.5403023058681398, 0.8414709848078964, 21.158683811904123], [0.4535961214255775, 0.8912073600614353, 20.98824605030915], [0.3623577544766736, 0.9320390859672263, 20.808203129164013], [0.26749882862458735, 0.963558185417193, 20.62035418696376], [0.16996714290024081, 0.9854497299884603, 20.426576328342275], [0.07073720166770268, 0.9974949866040544, 20.228805852583342], [-0.029199522301289037, 0.9995736030415051, 20.029018894708162], [-0.12884449429552508, 0.9916648104524686, 19.82921167364204], [-0.22720209469308753, 0.973847630878195, 19.63138054543327], [-0.32328956686350396, 0.9463000876874144, 19.43750206093484], [-0.4161468365471428, 0.9092974268256815, 19.24951322679474], [-0.5048461045998579, 0.8632093666488735, 19.06929216608586], [-0.5885011172553463, 0.8084964038195899, 18.898639370509265], [-0.6662760212798248, 0.7457052121767197, 18.73925972990545], [-0.7373937155412461, 0.6754631805511504, 18.592745516894475], [-0.8011436155469343, 0.5984721441039558, 18.460560494930135], [-0.8568887533689478, 0.5155013718214634, 18.34402530699004], [-0.9040721420170617, 0.42737988023382895, 18.244304289629504], [-0.9422223406686585, 0.33498815015590383, 18.162393843300034], [-0.9709581651495908, 0.23924932921398112, 18.09911247477466], [-0.9899924966004456, 0.1411200080598659, 18.055092611338434], [-0.9991351502732795, 0.04158066243328916, 18.03077426920874], [-0.998294775794753, -0.05837414342758142, 18.02640064057195], [-0.9874797699088647, -0.15774569414324996, 18.04201564480129], [-0.9667981925794605, -0.25554110202683294, 18.077463470012113], [-0.9364566872907957, -0.3507832276896215, 18.132390111289354], [-0.8967584163341462, -0.44252044329485407, 18.206246891880234], [-0.8481000317104072, -0.5298361409084948, 18.298295933591554], [-0.7909677119144155, -0.6118578909427207, 18.407617522787167], [-0.7259323042001387, -0.6877661591839753, 18.53311929897915], [-0.6536436208636106, -0.7568024953079294, 18.67354717428063], [-0.5748239465332677, -0.8182771110644114, 18.82749787417288], [-0.49026082134069865, -0.8715757724135886, 18.99343297335847], [-0.4007991720799746, -0.9161659367494552, 19.169694285135876], [-0.30733286997841935, -0.9516020738895161, 19.3545204489274], [-0.2107957994307797, -0.977530117665097, 19.546064548484235], [-0.11215252693505487, -0.9936910036334644, 19.742412583013294], [-0.012388663462891447, -0.9999232575641008, 19.941602605120398], [0.08749898343944551, -0.9961646088358408, 20.141644333111717], [0.18651236942257401, -0.9824526126243328, 20.34053904087604], [0.2836621854632246, -0.958924274663139, 20.5362995262895], [0.37797774271297857, -0.9258146823277331, 20.726969958821975], [0.4685166713003748, -0.8834546557201545, 20.91064540873519], [0.5543743361791585, -0.8322674422239027, 21.085490863886225], [0.6346928759426319, -0.7727644875559894, 21.249759545610008], [0.7086697742912575, -0.7055403255703945, 21.40181034236587], [0.7755658785102473, -0.6312666378723244, 21.540124188706006], [0.8347127848391573, -0.5506855425976414, 21.663319227562937], [0.8855195169413168, -0.4646021794137613, 21.770164605764027], [0.9274784307440339, -0.37387666483024096, 21.859592765965623], [0.9601702866503645, -0.27941549819893097, 21.930710112758476], [0.9832684384425836, -0.18216250427210112, 21.98280594642525], [0.9965420970232169, -0.0830894028175026, 22.015359574619215], [0.9998586363834152, 0.016813900484343496, 22.0280455299598], [0.9931849187581935, 0.11654920485048659, 22.02073684007094], [0.976587625728025, 0.21511998808780858, 21.99350631577292], [0.9502325919585318, 0.3115413635133711, 21.946625842810565], [0.9143831482353226, 0.40484992061659103, 21.880563682474993], [0.8693974903498292, 0.4941133511386012, 21.795979806551305], [0.815725100125362, 0.5784397643881929, 21.693719311983273], [0.7539022543433105, 0.6569865987187824, 21.574803980260302], [0.684546666442813, 0.7289690401258698, 21.440422065567642], [0.6083513145322623, 0.7936678638491472, 21.291916413962465], [0.5260775173811136, 0.8504366206285593, 21.13077103301783], [0.4385473275743999, 0.8987080958116223, 20.958596247296096], [0.3466353178350358, 0.9379999767747351, 20.77711258947609], [0.251259842582266, 0.9679196720314837, 20.58813358978925], [0.15337386203787576, 0.9881682338769986, 20.393547637474093], [0.05395542056266128, 0.9985433453746043, 20.195299097120817], [-0.04600212563952453, 0.9989413418397726, 19.9953688699676], [-0.14550003380860121, 0.9893582466233836, 19.795754595377375], [-0.24354415373577906, 0.9698898108450894, 19.598450690851642], [-0.33915486098382286, 0.9407305566797773, 19.405428430035762], [-0.431376844970608, 0.9021718337562995, 19.21861625727335], [-0.5192886541166735, 0.8545989080882879, 19.039880534431006], [-0.6020119026848123, 0.7984871126234988, 18.87100691100845], [-0.678720047320002, 0.734397097874123, 18.71368250205552], [-0.7486466455973892, 0.662969230082194, 18.56947905022436], [-0.8110930140616466, 0.5849171928917747, 18.439837238485893], [-0.8654352092411043, 0.5010208564578985, 18.32605230872911], [-0.9111302618846704, 0.41211848524177114, 18.22926112873657], [-0.9477216021311068, 0.3190983623493673, 18.150430835988175], [-0.97484362140416, 0.22288991410026324, 18.090349171489844], [-0.9922253254526013, 0.12445442350707933, 18.04961660046178], [-0.999693042035206, 0.024775425453375525, 18.028640299369286], [-0.9971721561963798, -0.07515112046179159, 18.027630070565955], [-0.9846878557941301, -0.17432678122296213, 18.04659622688696], [-0.962364879831315, -0.27176062641092535, 18.08534946903975], [-0.9304262721047604, -0.36647912925191023, 18.143502758766715], [-0.8891911526253699, -0.457535893775304, 18.220475170696066], [-0.8390715290764631, -0.5440211108893535, 18.315497685762473]];

    var option = {
      tooltip: {},
      backgroundColor: '#fff',
      visualMap: {
        show: false,
        dimension: 2,
        min: 0,
        max: 30,
        inRange: {
          color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        }
      },
      xAxis3D: {
        type: 'value'
      },
      yAxis3D: {
        type: 'value'
      },
      zAxis3D: {
        type: 'value'
      },
      grid3D: {
        viewControl: {
          projection: 'orthographic'
        }
      },
      series: [{
        type: 'line3D',
        data: data,
        lineStyle: {
          width: 4
        }
      }]
    };
    option && myChart.setOption(option);
  }

  // draw3DLine()
</script>
</html>